<!-- <%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%> -->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>hello</title>
</head>
<body>
	<!-- <br> ${user.id } ${user.username } ${user.password } ${user.age }
	<br>
	<c:out value="&lt要显示的数据对象（未使用转义字符）&gt" escapeXml="true" default="默认值"></c:out>
	<br />
	<c:out value="&lt要显示的数据对象（使用转义字符）&gt" escapeXml="false" default="默认值"></c:out>
	<br />
	<c:out value="${user.id }" escapeXml="false">使用的表达式结果为null，则输出该默认值</c:out>
	<br /> -->
	<!-- 导出并下载excel -->
	<form id="download" style="display: none;" action="/printPage" method="POST">
		<input id="sort" type="text" name="sort">
		<input id="order" type="text" name="order">
		<input type="text" name="title" />
		<input type="text" name="number" />
		<input type="text" name="size" />
		<input type="text" name="name" />
	</form>
	<!-- datagrid -->
	<table id="table1"></table>

	<br>
	<!-- insert user -->
	<div id="dialog1" style="display: none; padding: 20px;">
		<form id="form1" method="post">
			<table>
				<tr>
					<td><label for="username">用户名：</label></td>
					<td><input type="text" name="username" /></td>
				</tr>
				<tr>
					<td><label for="password">密码：</label></td>
					<td><input type="password" name="password" /></td>
				</tr>
				<tr>
					<td><label for="age">年龄：</label></td>
					<td><input type="text" name="age" /></td>
				</tr>
			</table>
		</form>
	</div>
	<!-- update user -->
	<div id="dialog2" style="display: none; padding: 20px;">
		<form id="form2" method="post">
			<table>
				<tr style="display: none;">
					<td><label for="id">id：</label></td>
					<td><input type="text" name="id" /></td>
				</tr>
				<tr>
					<td><label for="username">用户名：</label></td>
					<td><input type="text" name="username" /></td>
				</tr>
				<tr>
					<td><label for="password">密码：</label></td>
					<td><input type="password" name="password" /></td>
				</tr>
				<tr>
					<td><label for="age">年龄：</label></td>
					<td><input type="text" name="age" /></td>
				</tr>
			</table>
		</form>
	</div>
	
	<form action="/delete" method="post">
		<input class="easyui-textbox" id="del" type="text" name="number">
		<button type="submit">删除</button>
	</form>
	<br>
	<table id="table2"></table>

	<script type="text/javascript">
		$('#table1').datagrid({
			title : '用户',
			url : '/json2',
			fitColumns : true,
			striped : true,
			pagination : true,
			//remoteSort : false,
			toolbar : [ {
				text : '返回',
				iconCls : 'icon-back',
				handler : function() {
					back();//返回
				}
			}, '-' ,{
				text : '增加',
				iconCls : 'icon-add',
				handler : function() {
					add();//添加用户
				}
			}, '-' ,{
				text : '删除',
				iconCls : 'icon-cut',
				handler : function() {
					del();//删除用户
				}
			}, '-' ,{
				text : '修改',
				iconCls : 'icon-edit',
				handler : function() {
					modify();//修改用户
				}
			}, '-' ,{
				text : '请输入用户名：<input class="easyui-textbox" name="condition" id="condition" type="text">'
			}, {
				text : '搜索',
				iconCls : 'icon-search',
				//iconAlign : 'right',
				handler : function() {
					$('#page').textbox('reset');
					var name = $('#condition').textbox('getText');
					if(name){
						findPage(1, pager.pagination('options').pageSize, name, $('#sort').val(), $('#order').val());//根据username查询
					}else{
						$.messager.alert('警告', '请输入用户名');
					}
				}
			}, '-' ,{
				text : '导出本页',
				handler : function() {
					//不可以用ajax请求，不然不会提示下载
					$('input[name="title"]').val(getTitle());
					$('input[name="number"]').val(pager.pagination('options').pageNumber);
					$('input[name="size"]').val(pager.pagination('options').pageSize);
					$('input[name="name"]').val($('#condition').textbox('getText'));
					$('#download').submit();
				}
			}, '-' ,{
				text : '导出全部',
				handler : function() {
					$('input[name="title"]').val(getTitle());
					$('input[name="number"]').val(0);
					$('input[name="size"]').val(0);
					$('input[name="name"]').val($('#condition').textbox('getText'));
					$('#download').submit();
				}
			}],
			columns : [ [ {
				field : 'id',
				width : 100,
				checkbox : true
			}, {
				field : 'username',
				title : '用户名',
				editor : 'text',
				width : 100
			}, {
				field : 'password',
				title : '密码',
				editor : 'text',
				width : 100
			}, {
				field : 'age',
				title : '年龄',
				sortable : true,
				editor : 'numberbox',
				width : 100
			}, {field:'action',
				title:'编辑',
				width:100,
				formatter : function(value, row, index) {
					if (row.editing){
						var s = '<button onclick="saverow(this)">保存</button>';
						var c = '<button onclick="cancelrow(this)">取消</button>';
						return s+c;
					} else {
						var e = '<button onclick="editrow(this)">编辑</button>';
						var d = '<button onclick="deleterow(this)">删除</button>';
						return e+d;
					}
				}
			} ] ],
			/*
			当用户开始编辑一行时触发，参数包括：
			rowIndex：编辑行的索引，从 0 开始
			rowData：编辑行对应的记录
			*/
			onBeforeEdit : function(index, row) {
				row.editing = true;
				updateActions(index);
			},
			/*当用户完成编辑一行时触发，参数包括：
			rowIndex：编辑行的索引，从 0 开始
			rowData：编辑行对应的记录
			changes：更改的字段/值对
			*/
			onAfterEdit : function(index, row) {
				row.editing = false;
				updateActions(index);
			},
			/*
			当用户取消编辑一行时触发，参数包括：
			rowIndex：编辑行的索引，从 0 开始
			rowData：编辑行对应的记录
			*/
			onCancelEdit : function(index, row) {
				row.editing = false;
				updateActions(index);
			},
			/*
			当用户点击一行时触发，参数包括：
			rowIndex：被点击行的索引，从 0 开始
			rowData：被点击行对应的记录
			*/
			onClickRow : function(rowIndex, rowData) {
				var num = rowData.id;
				$('#del').textbox('setValue', num);
			},
			/* 
			当用户对一列进行排序时触发，参数包括：
			sort：排序的列的字段名
			order：排序的列的顺序
			*/
			onSortColumn : function(sort, order) {
				$('#sort').val(sort);
				$('#order').val(order);
				findPage(1, pager.pagination('options').pageSize, $('#condition').textbox('getText'), sort, order);
			},
			/* 当数据加载成功时触发。*/
			onLoadSuccess : function(data) {
				total();
			}
		});
		/*
		更新指定的行， param 参数包括下列属性：
		index：要更新的行的索引。
		row：新的行数据。
		*/
		function updateActions(index) {
			$('#table1').datagrid('updateRow', {
				index : index,
				row : {}
			});
		}
		function getRowIndex(target) {//得到index
			var tr = $(target).closest('tr.datagrid-row');
			return parseInt(tr.attr('datagrid-row-index'));
		}
		function editrow(target) {//开始对一行进行编辑。
			$('#table1').datagrid('beginEdit', getRowIndex(target));
		}
		function deleterow(target) {
			/*$('#table1').datagrid('getData')返回加载的数据。
			$('#table1').datagrid('getData').rows[getRowIndex(target)]得到行数据，参数index
			*/
			var index = getRowIndex(target);
			var row = $('#table1').datagrid('getData').rows[index];
			$.messager.confirm('Confirm','确定删除？',function(r){
				if (r){
					$('#table1').datagrid('deleteRow', index);
					$.ajax({
						type : 'POST',
						url : '/delete',
						data : {
							'number' : row.id
						},
					success : function(data) {
						findPage(pager.pagination('options').pageNumber, pager.pagination('options').pageSize, $('#condition').textbox('getText'), $('#sort').val(), $('#order').val());
					}
					});
				}
			});
		}
		function saverow(target) {//结束对一行进行编辑
			var index = getRowIndex(target);
			$('#table1').datagrid('endEdit', index);
			var row = $('#table1').datagrid('getData').rows[index];
			$.ajax({
				type : 'POST',
				url : '/update',
				data : {
					'id' : row.id,
					'username' : row.username,
					'password' : row.password,
					'age' : row.age
				},
				success : function(data) {
					
				}
			});
		}
		function cancelrow(target) {//取消对一行进行编辑。
			$('#table1').datagrid('cancelEdit', getRowIndex(target));
		}
		
		//导出excel得到datagrid列表 
		function getTitle() {
			var arrField = $('#table1').datagrid('getColumnFields');//得到datagridfield
			var arrTitle = '';
			for (var i = 1; i < arrField.length - 1; i++) {//$('#table1').datagrid('getColumnOption',arrField[i])返回指定列的选项
				arrTitle += $('#table1').datagrid('getColumnOption', arrField[i]).title + ',';
			}
			arrTitle = arrTitle.substring(0, arrTitle.length - 1);
			return arrTitle;
		}

		//返回
		function back() {
			$('#condition').textbox('reset');
			$('#page').textbox('reset');
			$('#sort').val('');
			$('#order').val('');
			findPage(1, pager.pagination('options').pageSize, $('#condition').textbox('getText'), $('#sort').val(), $('#order').val());
		}

		//添加用户
		function add() {
			$('#dialog1').css('display', 'block');
			$('#dialog1').dialog({
				title : '添加用户',
				iconCls : 'icon-add',
				modal : true,
				buttons : [ {
					text : '确定',
					handler : function() {
						$('#form1').form('submit', {
							url : '/add',
							success : function(data) {
								$('#dialog1').dialog('close');
								$('#form1').form('reset');//重置form
								$.messager.show({
									title : '添加',
									msg : '添加成功',
									timeout : 5000,
									showType : 'slide'
								});
								//$('#table1').datagrid('reload');
								$('#condition').textbox('reset');//当查询的时候添加数据，会清空查询框并返回首页
								findPage(1, pager.pagination('options').pageSize, $('#condition').textbox('getText'), $('#sort').val(), $('#order').val());
							}
						});
					}
				}, {
					text : '取消',
					handler : function() {
						$('#dialog1').dialog('close');
						$.messager.show({
							title : '取消',
							msg : '取消添加',
							timeout : 5000,
							showType : 'slide'
						});
					}
				} ]
			});
		}

		//删除用户
		function del() {
			var ids = '';
			var arr = $('#table1').datagrid('getChecked');//得到所有选中航
			if (arr.length) {
				for (var i = 0; i < arr.length; i++) {
					ids += arr[i].id + ',';
				}
				ids = ids.substring(0, ids.length - 1);
				$.messager.confirm('Confirm', '确定删除么？', function(r) {
					if (r) {
						$.ajax({
							type : 'POST',
							url : '/dellist',
							data : {
								'Ids' : ids
								},
							dataType : 'json',
							success : function(data) {
								if (data.result) {
									$.messager.show({
										title : '删除',
										msg : '删除成功！',
										timeout : 5000,
										showType : 'slide'
										});
									//$('#table1').datagrid('reload');
									findPage(pager.pagination('options').pageNumber, pager.pagination('options').pageSize, $('#condition').textbox('getText'), $('#sort').val(), $('#order').val());
									} else {
										$.messager.alert('警告', '删除失败！');
										}
								}
								});
						} else {
							$.messager.show({
								title : '取消',
								msg : '取消删除！',
								timeout : 5000,
								showType : 'slide'
								});
							$('#table1').datagrid('clearChecked');
							}
					});
				} else {
					$.messager.alert('警告', '请选中某一行');
					}
			}

		//修改用户
		function modify() {
			var arr = $('#table1').datagrid('getChecked');
			if (arr.length == 1) {
				$('input[name="id"]').attr('value', arr[0].id);//为input赋值
				$('input[name="username"]').attr('value', arr[0].username);
				$('input[name="password"]').attr('value', arr[0].password);
				$('input[name="age"]').attr('value', arr[0].age);
				$('#dialog2').css('display', 'block');
				$('#dialog2').dialog({
					title : '修改',
					iconCls : 'icon-edit',
					buttons : [{
						text : '确定',
						handler : function() {
							$('#form2').form('submit', {
								url : '/update',
								success : function(data) {
									$('#dialog2').dialog('close');
									$('#form2').form('reset');
									$.messager.show({
										title : '修改',
										msg : '修改成功',
										timeout : 5000,
										showType : 'slide'
										});
									//$('#table1').datagrid('reload');
									//pager.pagination('options').pageNumber获取当前页码
									//pager.pagination('options').pageSize获取当前页大小
									findPage(pager.pagination('options').pageNumber, pager.pagination('options').pageSize, $('#condition').textbox('getText'), $('#sort').val(), $('#order').val());
									}
							});
							}
					}, {
						text : '取消',
						handler : function() {
							$('#dialog2').dialog('close');
							$.messager.show({
								title : '取消',
								msg : '取消修改',
								timeout : 5000,
								showType : 'slide'
								});
							$('#table1').datagrid('clearChecked');//取消选中
							}
					} ]
				});
				} else {
					$.messager.alert('警告', '请选中一行');
					}
			}

		var pager = $('#table1').datagrid('getPager');//获取分页对象
		function total() {//获取总数
			var name = $('#condition').textbox('getText');//获取查询条件
			$.ajax({
				type : 'POST',
				url : '/total',
				data : {
					'name' : name
				},
				success : function(data) {
					var num = data;
					pager.pagination('refresh', {
						total : num
					});
				}
			});
		}
		pager.pagination({
			pageSize : 10,
			pageList : [ 10, 20, 30 ],
			beforePageText : '第',//页数文本框前显示的汉字 
			afterPageText : '页   共 {pages} 页',
			displayMsg : '当前显示 {from} - {to} 条记录   共 {total} 条记录',
			buttons : [{
				text : '输入页数：<input class="easyui-textbox" id="page" name="page">'
				}, {
					text : '转到',
					iconCls : 'icon-goto',
					iconAlign : 'right',
					handler : function() {
						var num = $('#page').textbox('getText');
						if(num && !isNaN(num)){
							//findPage(num, pager.pagination('options').pageSize, $('#condition').textbox('getText'), $('#sort').val(), $('#order').val());
							pager.pagination('refresh', {
								pageNumber : num
							});
						}else{
							$.messager.alert('警告', '请输入页数');
							}
						}
				} ],
				onSelectPage : function(pageNumber, pageSize) {
					findPage(pageNumber, pageSize, $('#condition').textbox('getText'), $('#sort').val(), $('#order').val());
					}
			});
		function findPage(pageNumber, pageSize, name, sort, order) {
			$.ajax({
				type : 'POST',
				url : '/json2',
				data : {
					'page' : pageNumber,
					'rows' : pageSize,
					'name' : name,
					'sort' : sort,
					'order' : order
				},
				success : function(data) {
					$('#table1').datagrid('loadData', data);//加载本地数据，旧的行会被移除。参数data
					$.ajax({
						type : 'POST',
						url : '/total',
						data : {
							'name' : name
						},
						success : function(data) {
							pager.pagination('refresh', {//刷新并显示分页信息
								total : data,
								pageNumber : pageNumber,
								pageSize : pageSize
							});
						}
					});
				}
			});
		}

		$('#table2').datagrid({
			title : '用户',
			url : '/json1',
			fitColumns : true,
			striped : true,
			pagination : true,
			columns : [ [ {
				field : 'id',
				checkbox : true,
				width : 100
			}, {
				field : 'username',
				title : '用户名',
				width : 100
			}, {
				field : 'password',
				title : '密码',
				width : 100
			}, {
				field : 'age',
				title : '年龄',
				sortable : true,
				width : 100
			} ] ]
		});
	</script>
</body>
</html>